<template>
    <transition name="fade">
  <div class="container bg-grey">
      <left-panel ref="left_panel"></left-panel>
      <div class="header">
          <a class="left" v-on:click="show_left"><img src="../../assets/list.png" ></a>
          <router-link to="shopping-pack" class="right"><img src="../../assets/shopping_pack.png"></router-link>
      </div>
      <div class="banner">
          <div class="item"><img src="../../assets/banner.jpg"></div>
      </div>
      <div class="ver-slide home-nav">
          <div class="ver-slide-content">
              <div class="item"><img src="../../assets/nav/1.jpg"></div>
              <div class="item"><img src="../../assets/nav/2.jpg"></div>
              <div class="item"><img src="../../assets/nav/3.jpg"></div>
              <div class="item"><img src="../../assets/nav/4.jpg"></div>
          </div>
      </div>
      <div class="block-title">
          【 店长推荐 】
          <div class="small">冬天不寒冷系列 精选单品</div>
          <div class="small"><img class="tag" src="../../assets/rec.png"></div>
      </div>
      <div class="product-list">
          <a class="item" href="#/product-detail">
              <div class="panel">
                  <div class="img" :style="{background: 'url('+product_default_img+') no-repeat center / cover'}"> </div>
                  <div class="title">万事利桑蚕丝丝巾</div>
                  <div class="desc">真丝绒围巾-柔情岁月 真丝绒围巾</div>
                  <div class="price"><span class="pull-left">￥358.00/件</span><del class="pull-left market-price">￥498.00</del></div>
              </div>
          </a>
          <a class="item" href="#/product-detail">
              <div class="panel">
                  <div class="img" :style="{background: 'url('+product_default_img+') no-repeat center / cover'}"> </div>
                  <div class="title">万事利桑蚕丝丝巾</div>
                  <div class="desc">真丝绒围巾-柔情岁月 真丝绒围巾</div>
                  <div class="price"><span class="pull-left">￥358.00/件</span><del class="pull-left market-price">￥498.00</del></div>
              </div>
          </a>
          <a class="item" href="#/product-detail">
              <div class="panel">
                  <div class="img" :style="{background: 'url('+product_default_img+') no-repeat center / cover'}"> </div>
                  <div class="title">万事利桑蚕丝丝巾</div>
                  <div class="desc">真丝绒围巾-柔情岁月 真丝绒围巾</div>
                  <div class="price"><span class="pull-left">￥358.00/件</span><del class="pull-left market-price">￥498.00</del></div>
              </div>
          </a>
          <a class="item" href="#/product-detail">
              <div class="panel">
                  <div class="img" :style="{background: 'url('+product_default_img+') no-repeat center / cover'}"> </div>
                  <div class="title">万事利桑蚕丝丝巾</div>
                  <div class="desc">真丝绒围巾-柔情岁月 真丝绒围巾</div>
                  <div class="price"><span class="pull-left">￥358.00/件</span><del class="pull-left market-price">￥498.00</del></div>
              </div>
          </a>
      </div>
      <div class="block-title">
          <img class="title-img" src="../../assets/ad/3.jpg">
      </div>
      <div class="block-title">
          【 发烧影音 】
          <div class="small">排斥入门级系列</div>
          <div class="small"><img class="tag" src="../../assets/zy.png"></div>
      </div>
      <div class="ver-slide ver-slide-block">
          <div class="ver-slide-content">
              <a class="item">
                  <div class="img" :style="{background: 'url('+require('@/assets/goods/1.jpg')+') no-repeat center / cover'}"> </div>
                  <div class="title">B&O PLAY H9 </div>
              </a>
              <a class="item">
                  <div class="img" :style="{background: 'url('+require('@/assets/goods/3.jpg')+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3</div>
              </a>
              <a class="item">
                  <div class="img" :style="{background: 'url('+require('@/assets/goods/3.jpg')+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3</div>
              </a>
          </div>
      </div>

      <div class="block-title">
          【 入门首选 】
          <div class="small">入烧有风险，发烧需谨慎</div>
          <div class="small"><img class="tag" src="../../assets/xs.png"></div>
      </div>
      <div class="ver-slide ver-slide-block">
          <div class="ver-slide-content">
              <a class="item">
                  <div class="img" :style="{background: 'url('+product_b_img+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3 </div>
              </a>
              <a class="item">
                  <div class="img" :style="{background: 'url('+product_b_img+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3 </div>
              </a>
              <a class="item">
                  <div class="img" :style="{background: 'url('+product_b_img+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3</div>
              </a>
              <a class="item">
                  <div class="img" :style="{background: 'url('+product_b_img+') no-repeat center / cover'}"> </div>
                  <div class="title">Beats Solo3</div>
              </a>

          </div>
      </div>
      <div class="block-title bg-grey">

          <img class="title-img" src="../../assets/ad/4.jpg">
      </div>
      <bottom></bottom>
  </div>
    </transition>
</template>

<script>
	import left_panel from "../common/left_panel.vue"
	import bottom from "../common/bottom.vue"
    export default {
        name: 'index',
        data () {
            return {
                product_default_img:require('@/assets/goods/7.jpg'),
				product_b_img:require('@/assets/goods/5.jpg'),
            }
        },
		methods:{
			show_left:function ()
			{
				this.$refs.left_panel.show();
			}
		},
		components:{
			'left-panel':left_panel,
            'bottom':bottom
		}

    }
</script>

<style scoped>
    /*定义滚动条的轨道*/
    .ver-slide::-webkit-scrollbar,iframe::-webkit-scrollbar{
        width: 0px;
        height: 0px;
        background-color: #f5f5f5;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    .ver-slide::-webkit-scrollbar-track,iframe::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.3);
        border-radius: 10px;
        background-color: #f5f5f5;
    }
    /*定义滑块，内阴影及圆角*/
    .ver-slide::-webkit-scrollbar-thumb,iframe::-webkit-scrollbar-thumb{
        /*width: 10px;*/
        height: 0px;
        border-radius: 0px;
        -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.3);
        background-color: #555;
    }
    .ver-slide{
        width: 100%;
        overflow-y: hidden;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        padding: 15px 10px;
    }
    .ver-slide-content{
        display: inline;
        white-space: nowrap;
        width: auto;
        height: 100%;
        float: left;
    }
    .ver-slide-content .item{
        text-align: center;
        display: inline-block;
        height: 100%;
        border: 1px solid #f4f4f4;
        box-shadow: 0 0 10px #f4f4f4;
        border-radius: 7px;
        overflow: hidden;
        margin-right: 10px;
    }
    .ver-slide-content .item img{
        height: 100%;
    }
    .home-nav{
        height: 130px;
        background: #fff;
        border-bottom: 1px solid #cccccc;
        margin-bottom: 7px;
    }
    .home-nav .item{
        width: 160px;
    }
    .ver-slide-block{
        background: #fff;
        border-bottom: 1px solid #cccccc;
        margin-bottom: 7px;
        padding: 5px 10px;
    }
    .ver-slide-block .item{
        width: 160px;
        padding: 10px;
        overflow: hidden;
    }
    .ver-slide-block .item .img{
        width: 100%;
        height: 138px;
    }
    .ver-slide-block .item .title{
        height: 2rem;
        overflow: hidden;
        display: block;
        width: 100%;
        word-break: break-all;
        text-align: left;
        padding: 5px 0;
    }
    .banner{
        background: #fff;
        height: 43.3vw;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    .banner .item{
        height: 100%;
        width: 100%;
        position: absolute;
        top:0;
        left: 0;
        overflow: hidden;
    }
    .banner .item img{
        width: 100%;
    }
    .block-title{
        padding-top:10px;
        font-weight: bold;
        text-align: center;
        font-size: 1.2rem;
        background: #fff;
    }
    .block-title .small{
        font-size: 0.6rem;
        color: #999;
        font-weight: normal;
        padding: 3px 0;
    }
    .block-title .tag{
        height: 22px;
    }
    .block-title .title-img{
        margin-top: -10px;
        width: 100%;
    }
    .product-list{
        overflow: hidden;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #cccccc;
        margin-bottom: 7px;
    }
    .product-list .item{
        float: left;
        display: block;
        width: 50%;
        padding: 14px;

    }
    .product-list .item .panel{
        width: 100%;
    }
    .product-list .item:nth-child(odd){
        padding-right: 7px;
    }
    .product-list .item:nth-child(even){
        padding-left: 7px;
    }
    .product-list .item .img{
        width: 100%;
        height: calc(50vw - 13px);
        border-radius: 3px;
    }
    .product-list .item .title,.product-list .item .desc,.product-list .item .price{
        padding: 3px 0;
    }
    .product-list .item .title{
        height: 1.5rem;
        overflow: hidden;
        font-weight: 600;

    }
    .product-list .item .desc{
        font-size: 0.8rem;
        color: #999;
        height: 2.5rem;
        overflow: hidden;
    }
    .product-list .item .price{
        color: #333;
        overflow: hidden;
        line-height: 1.5rem;
        margin-top: 8px;
    }

    .product-list .item .market-price{
        font-size: 0.8rem;
        color: #999;
        margin-left: 10px;
    }

    .header{
        background: transparent;
        box-shadow: none;

    }

</style>
